<template>
  <view v-if="shenheStatus == 0" class="page">
    <singleHeader pageTitle="业绩分红中心"></singleHeader>

    <view class="headerBg"> </view>

    <view class="module">
      <view class="user-info" v-if="userInfo">
        <image :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="rig">
          <view class="tit">{{ userInfo.name }}</view>
          <view class="des">{{ userInfo.team_grades_level_name }}</view>
        </view>
      </view>

      <view class="module-con content" v-if="teamGradesPool">
        <view class="module-con-hd">
          <view class="let">
            <view class="tit">可提现业绩分红(元)</view>
            <view class="num">{{ teamGradesPool.price }}</view>
          </view>

          <view
            class="btn"
            @click="
              $utils.toUrl('/user/shop/cash?is_team_grades=1&cash_type=11')
            "
            >账户提现</view
          >
        </view>

        <view class="module-con-bd">
          <view class="list">
            <view
              class="item"
              @click="$utils.toUrl('/tools/teamGrades/bonusRecord?status=0')"
            >
              <view class="tit">未到账业绩分红(元)</view>
              <view class="price">{{ teamGradesPool.no_send_price }}</view>
              <view class="more">
                去查看<i class="iconfont icon-arrow-right"></i>
              </view>
            </view>
            <view
              class="item"
              @click="$utils.toUrl('/user/cash/cash?cash_type=11&index=3')"
            >
              <view class="tit">已提现业绩分红(元)</view>
              <view class="price">{{ teamGradesPool.cash_price }}</view>
              <view class="more">
                去查看<i class="iconfont icon-arrow-right"></i>
              </view>
            </view>
          </view>

          <view
            class="total"
            @click="$utils.toUrl('/tools/teamGrades/teamScore')"
          >
            <view>累计业绩分红 ¥{{ teamGradesPool.total_price }}</view>
            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
      </view>

      <view class="module-con" v-if="asyncImgs && asyncImgs.team_grades">
        <view class="link-list">
          <view
            class="item"
            @click="$utils.toUrl('/tools/teamGrades/bonusRecord')"
          >
            <image
              :src="asyncImgs.team_grades.team_grades_log"
              mode="widthFix"
            ></image>
            <view class="num">分红记录</view>
          </view>
          <view
            class="item"
            @click="$utils.toUrl('/tools/teamGrades/teamScore')"
          >
            <image
              :src="asyncImgs.team_grades.team_grades_price"
              mode="widthFix"
            ></image>
            <view class="num">累计业绩</view>
          </view>
          <view class="item" @click="$utils.toUrl('/tools/teamGrades/task')">
            <image
              :src="asyncImgs.team_grades.team_grades_level"
              mode="widthFix"
            ></image>
            <view class="num">我的等级</view>
          </view>
        </view>
      </view>
    </view>
    <transitionPage></transitionPage>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { poolIndex } from "@/api/teamGrades.js";

export default {
  components: {
    Shenhe
  },
  data() {
    return {
      isFirst: true,
      userInfo: null,
      teamGradesPool: null
    };
  },
  async onShow() {
    const res = await poolIndex({}, this.isFirst);
    if (!res.code) {
      console.log("res,", res.data);
      let { user_info, team_grades_pool } = res.data;

      this.userInfo = user_info;
      this.teamGradesPool = team_grades_pool;

      if (this.isFirst) this.isFirst = false;
    }
  },
  onHide() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f2f2f2;
}

.headerBg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 558rpx;
  background: linear-gradient(180deg, #f5ebee 0%, #f2f2f2 100%);
}

::v-deep {
  .page-header {
    background: none !important;
  }
}

.module {
  position: relative;
  z-index: 3;
  padding: 0 24rpx;
}

.user-info {
  display: flex;

  image {
    margin-right: 20rpx;
    width: 76rpx;
    height: 76rpx;
    border-radius: 32px;
    background: #fff;
  }

  .rig {
    flex: 1;
    overflow: hidden;
  }

  .tit {
    font-size: 30rpx;
    color: #262626;
    font-weight: bold;
  }

  .des {
    font-size: 24rpx;
    color: #8c8c8c;
  }
}

.module-con {
  margin-top: 24rpx;
  background: #fff;
  border-radius: 24rpx;
}

.content {
  padding: 48rpx 40rpx 0;
}

.module-con-hd {
  display: flex;
  align-items: flex-end;

  .let {
    flex: 1;
    overflow: hidden;

    .tit {
      font-size: 28rpx;
      color: #8c8c8c;
    }

    .num {
      padding: 16rpx 0 10rpx;
      font-size: 60rpx;
      line-height: 1;
    }
  }

  .btn {
    padding: 20rpx 40rpx;
    background: #f0250e;
    border-radius: 32px;
    font-size: 28rpx;
    color: #fff;
  }
}

.module-con-bd {
  padding: 50rpx 0 0;
  .list {
    display: flex;

    .item {
      width: 50%;
      font-size: 24rpx;
      color: #8c8c8c;
    }

    .price {
      padding: 10rpx 0;
      font-size: 30rpx;
      color: rgba(0, 0, 0, 0.85);
    }

    .more {
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 20rpx;
      }
    }
  }

  .total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24rpx;
    padding: 24rpx 0;
    border-top: 1px solid #f8f8f8;
    font-size: 24rpx;
    color: #8c8c8c;

    .iconfont {
      font-size: 20rpx;
    }
  }
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  padding: 40rpx 30rpx;

  .item {
    width: 20%;
    text-align: center;

    image {
      width: 60rpx;
      height: 60rpx;
    }

    .num {
      font-size: 24rpx;
      color: #262626;
    }
  }
}
</style>
